<template>
<!--查询-->
<div style="margin-bottom: 15px;">
  用户名:<el-input v-model="form.userName" placeholder="请输入用户名" style="width: 240px;"></el-input>
  审批状态:<el-input  v-model="form.toExamine" style="width: 240px;"></el-input>
  <el-button type="primary" @click="getLeaveList">查询</el-button>
</div>

<!--请假列表-->
<el-table :data="leaveData" border style="width: 100%">
    <el-table-column prop="userName" label="姓名" align="center" />
    <el-table-column prop="departmentId" label="部门" align="center" >
      <template v-slot="scope">
        <span v-if="scope.row.departmentId==1">IT信息部</span>
        <span v-if="scope.row.departmentId==2">人力资源部</span>
        <span v-if="scope.row.departmentId==3">财务部</span>
        <span v-if="scope.row.departmentId==4">销售部</span>
        <span v-if="scope.row.departmentId==5">行政部</span>
      </template>
    </el-table-column>
    <el-table-column prop="subjectMatter" label="请假类别" align="center" />
    <el-table-column prop="address" label="请假时间" align="center" width="190px" >
      <template v-slot="scope">
        {{ scope.row.leaveStartTime }}至{{ scope.row.leaveEndTime }}
      </template>
    </el-table-column>
    <el-table-column prop="totalWorkTime" label="总工时(H)" align="center" />
    <el-table-column prop="registrationTime" label="报到时间" align="center" width="100px" >
      <template v-slot="scope">
        {{ scope.row.registrationTime }}
      </template>
    </el-table-column>
    <el-table-column prop="leaveType" label="请假事由" align="center" >
      <template v-slot="scope">
        <span v-if="scope.row.leaveType==1">事假</span>
        <span v-if="scope.row.leaveType==2">病假</span>
        <span v-if="scope.row.leaveType==3">婚假</span>
        <span v-if="scope.row.leaveType==4">丧假</span>
        <span v-if="scope.row.leaveType==5">产假</span>
        <span v-if="scope.row.leaveType==6">补休</span>
        <span v-if="scope.row.leaveType==7">工伤</span>
        <span v-if="scope.row.leaveType==8">其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="departmentLeader" label="部门领导" align="center" />
    <el-table-column prop="toExamine" label="审批状态" align="center" >
      <template v-slot="scope">
        <span v-if="scope.row.toExamine==true">已审核</span>
        <span v-else>未审核</span>
      </template>
    </el-table-column>
    <el-table-column prop="createdDate" label="创建时间" align="center" width="100px" >
      <template v-slot="scope">
        {{ scope.row.createdDate }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" align="center" width="150px" >
      <template v-slot="scope">
        <el-link target="_blank" v-if="scope.row.toExamine==false" @click="UpdateLeave(scope.row.leaveId)">修改</el-link>&nbsp;
        <span v-if="scope.row.toExamine==true"></span>

        <el-link target="_blank" @click="DelLeave(scope.row.leaveId)">删除</el-link>&nbsp;

        <el-link target="_blank" v-if="scope.row.toExamine==false" @click="Approve(scope.row.leaveId)">审批</el-link>&nbsp;
        <span v-if="scope.row.toExamine==true"></span>    
      </template>
    </el-table-column>
  </el-table>

    <!--分页-->
<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[3, 5, 7, 9]" :background="true" layout="total,slot, sizes" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <span>
            ，每页{{ form.pageSize }}条，当前第:{{ form.pageIndex }}/{{ form.pageCount }}页
          </span>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[100, 200, 300, 400]" :background="true" layout="slot, prev, pager, next" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[100, 200, 300, 400]" :background="true" layout="slot, jumper" :total="form.totalCount" prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button type="primary" class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </tbody>
</table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, formProps } from 'element-plus'

import {useRoute,useRouter} from 'vue-router'
import { fa } from 'element-plus/es/locales.mjs';

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getLeaveList()
})

const form: any = reactive({
  userId:'',
  pageIndex: 1,
  pageSize: 5,
  userName: '',
  pageCount:0,
  totalCount: 0,
  toExamine:null,
})

//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getLeaveList()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getLeaveList()
}

//获取Token字符串中的UserId
var token:any = localStorage.getItem("Tokens")
//console.log(token);
//分割JWT字符串
const [header, payload, signature] = token.split(".");
//Base64解码Payload
const payloadDecoded = atob(payload);
//解析JSON字符串
const payloadParsed=JSON.parse(payloadDecoded)
//提取userId和roleId
form.userId = payloadParsed.sub;
const roleId = payloadParsed['http://schemas.microsoft.com/ws/2008/06/identity/claims/role'];  
// console.log(form.userId);
// console.log(roleId);



//获取请假列表
const leaveData:any=ref([])
const getLeaveList = () => {
  let leaveList: any = {
    userId:form.userId,
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    userName: form.userName,
    toExamine:form.toExamine
  }
  axios.post('/api/LeaveManagement/GetLeaveList',leaveList).then(res=>{
    console.log(res);
    leaveData.value = res.data.data.list;
    form.pageCount = res.data.data.pageCount;
    form.totalCount = res.data.data.totalCount;
  }).catch(err=>{
    console.log(err);
    
  })    
}

//修改
const UpdateLeave = (leaveId:number) => {
  router.push({
    name: 'UpdateLeave',
    query: {
      leaveId:leaveId
    }
  }) 
}
//审批
const Approve = (leaveId:number) => {
  router.push({
    name: 'ApproveLeave',
    query: {
      leaveId:leaveId
    }
  }) 
}

//删除
const DelLeave = (leaveId:number) => {
  let delInfo = {
    leaveId:leaveId
  }
  ElMessageBox.confirm(
    '确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      axios.post('/api/LeaveManagement/DeletedLeaveInfo', delInfo).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          ElMessage.success("删除成功!");
          //刷新页面
          getLeaveList()
        } else {
          ElMessage.error("删除失败!")
          return
        }
      }).catch(err => {
        console.log(err);

      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

</script>

<style scoped>

</style>